<button
  #button
  class="po-button"
  [type]="type()"
  [class.po-button-aa]="size === 'small'"
  [class.po-button-large]="size === 'large'"
  [attr.p-kind]="kind"
  [attr.p-danger]="danger"
  [disabled]="disabled || loading"
  [attr.aria-label]="ariaLabel()"
  [attr.aria-expanded]="ariaExpanded"
  (blur)="onBlur()"
  (click)="onClick()"
>
  @if (loading) {
    <div class="po-button-loading-icon">
      <po-loading-icon p-neutral-color [p-size]="mapSizeToIcon(size)"></po-loading-icon>
    </div>
  }

  <div class="po-button-container">
    @if (icon()) {
      <po-icon class="po-button-icon" [class.po-button-icon-aa]="size === 'small'" [p-icon]="icon()"></po-icon>
    }
    @if (label()) {
      <span class="po-button-label">{{ label() }}</span>
    }
  </div>
</button>
